/**
 * tabs.css 
 * tab选项卡通用样式
 * 
 * dependencies：
 * @require ../base.css
 * @require nav.css
 * 
 * modified by Oscar at 2017/05/03 09:35.
 * 
 */

@import "../components/_base.scss";
/*== 默认选项卡 ==*/
.nav-tabs, 
.nav-tabs > li:first-child > a { margin-left: 0; }

.nav-tabs { border-color: #c5d0dc; margin-bottom: 0; position: relative; top: 1px; z-index:2; }
.nav-tabs > li > a { padding: 7px 12px 8px; *zoom:1; }

.nav-tabs > li > a,
.nav-tabs > li > a:focus { background-color: #f9f9f9; border-color: #c5d0dc; border-radius: 0; color: #999; line-height: 18px; margin-right: -1px; position: relative; }
.nav-tabs > li > a:active, 
.nav-tabs > li > a:focus { outline: 0 none; }

.nav-tabs > li.active > a, 
.nav-tabs > li.active > a:focus, 
.nav-tabs > li.active > a:hover { background-color: $WhiteColor; border-color: #4c8fbd #c5d0dc transparent;*border-bottom-color:$WhiteColor;  border-top: 2px solid #4c8fbd; box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.15); color: #576373; line-height: 18px; margin-top: -1px; z-index: 1; }

.nav-tabs > li > a:hover { background-color: $WhiteColor; border-color: #c5d0dc; color: #4c8fbd; }
.nav-tabs > li > a .badge { line-height: 15px; opacity: 0.75; padding: 1px 5px 0; vertical-align: 0; }
.nav-tabs > li > a .eyui-icon { *margin-right:3px; *margin-top:-2px; }
.nav-tabs > li.open .dropdown-toggle { background-color: #4f99c6; border-bottom-color: #4f99c6; border-left-color: #4f99c6; border-right-color: #4f99c6; border-top-color: #4f99c6; color: $WhiteColor; }

.tab-content { border: 1px solid #c5d0dc; padding: 16px 12px; position: relative; z-index:1; }

/*== 菜单位置选项卡 ==*/

.tabs-left .tab-content,
.tabs-right .tab-content { overflow: auto; }

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a { min-width: 60px; }

/* 左边 */
.tabs-left > .nav-tabs { border-color: #c5d0dc; float: left; margin-bottom: 0; top: auto; }
.tabs-left > .nav-tabs > li { float: none; }

.tabs-left > .nav-tabs > li > a, 
.tabs-left > .nav-tabs > li > a:focus, 
.tabs-left > .nav-tabs > li > a:hover { border-color: #c5d0dc; margin: 0 -1px 0 0; }

.tabs-left > .nav-tabs > li.active > a,
.tabs-left > .nav-tabs > li.active > a:focus,
.tabs-left > .nav-tabs > li.active > a:hover { border-color: #c5d0dc transparent #c5d0dc #4c8fbd; *border-right-color: $WhiteColor; border-left: 2px solid #4c8fbd; border-top-width: 1px; box-shadow: -2px 0 3px 0 rgba(0, 0, 0, 0.15); margin: 0 -1px; }

/* 右边 */
.tabs-right > .nav-tabs { border-bottom-color: #c5d0dc; border-left-color: #c5d0dc; border-right-color: #c5d0dc; border-top-color: #c5d0dc; float: right; margin-bottom: 0; top: auto; }
.tabs-right > .nav-tabs > li { float: none; }

.tabs-right > .nav-tabs > li > a, 
.tabs-right > .nav-tabs > li > a:focus, 
.tabs-right > .nav-tabs > li > a:hover { border-bottom-color: #c5d0dc; border-left-color: #c5d0dc; border-right-color: #c5d0dc; border-top-color: #c5d0dc; margin-bottom: 0; margin-left: -1px; margin-right: -1px; margin-top: 0; }

.tabs-right > .nav-tabs > li.active > a,
.tabs-right > .nav-tabs > li.active > a:focus,
.tabs-right > .nav-tabs > li.active > a:hover { border-bottom-color: #c5d0dc; border-left-color: transparent; *border-left-color: $WhiteColor; border-right-color: #4c8fbd; border-right-style: solid; border-right-width: 2px; border-top-color: #c5d0dc; border-top-width: 1px; box-shadow: 2px 0 3px 0 rgba(0, 0, 0, 0.15); margin-bottom: 0; margin-left: -1px; margin-right: -2px; margin-top: 0; }


/* 下方 */
.tabs-below > .nav-tabs { border-bottom-width: 0; border-color: #c5d0dc; margin-bottom: 0; margin-top: -1px; top: auto; }
.tabs-below > .nav-tabs > li > a, 
.tabs-below > .nav-tabs > li > a:focus, 
.tabs-below > .nav-tabs > li > a:hover { border-color: #c5d0dc; }
.tabs-below > .nav-tabs > li.active > a,
.tabs-below > .nav-tabs > li.active > a:focus,
.tabs-below > .nav-tabs > li.active > a:hover { border-bottom: 2px solid #4c8fbd; border-color: transparent #c5d0dc #4c8fbd; *border-top-color: $WhiteColor; border-top-width: 1px; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15); margin-top: 0; }

/*== 颜色 ==*/
.nav-tabs.tab-color-blue { border-bottom-color: #c5d0dc; }
.nav-tabs.background-blue { background-color: #eff3f8; border: 1px solid #c5d0dc; padding-top: 6px; }
.nav-tabs.padding-12 { padding-left: 12px; }

.nav-tabs[class*="tab-color-"] > li > a,
.nav-tabs[class*="tab-color-"] > li > a:focus,
.nav-tabs[class*="tab-color-"] > li > a:hover { border-color: transparent; color: $WhiteColor; margin-right: 3px; }

.nav-tabs.tab-color-blue > li > a,
.nav-tabs.tab-color-blue > li > a:focus { background-color: #7db4d8; }

.nav-tabs[class*="tab-color-"] > li.active > a,
.nav-tabs[class*="tab-color-"] > li.active > a:focus,
.nav-tabs[class*="tab-color-"] > li.active > a:hover { background-color: $WhiteColor; box-shadow: none; color: #4f80a0; }

.nav-tabs.tab-color-blue > li.active > a,
.nav-tabs.tab-color-blue > li.active > a:focus,
.nav-tabs.tab-color-blue > li.active > a:hover { border-color: #7db4d8 #7db4d8 transparent; *border-bottom-color: $WhiteColor; color: #4c718a; }



